---
import { getEntry } from "astro:content";
import SingleModule from "./components/SingleModule.astro";
import useIcon from "@/hooks/useIcon";
import logo from "@/assets/icon/logo.png";
import { Image } from "astro:assets";

const WikiChangelog = (
  await Astro.glob("/.cache/changelog/guide-wiki-changelog.md")
)[0].Content;
const NormalChangelog = (
  await Astro.glob("/.cache/changelog/guide-changelog.md")
)[0].Content;
const { Content: About } = await (await getEntry("about", "guide")).render();
const { largeIcon: itemIcon } = useIcon("pdc_point")!;
const { largeIcon: blockIcon } = useIcon("porcelain_throne")!;

const guides = [
  {
    link: "/wiki/preview",
    title: "词条总览",
    subTitle: "Wiki 所有词条收集页面，你可以在这里查看所有的词条",
    img: logo.src,
  },
  {
    link: "/wiki/preview/items",
    title: "物品",
    subTitle:
      "Mod 内所有的物品总览，按照每位 liver 所属物品进行分类，可能比在 Mod 内找更方便...",
    img: itemIcon,
  },
  {
    link: "/wiki/preview/blocks",
    title: "方块",
    subTitle: "Mod 内所有的方块一览",
    img: blockIcon,
  },
  {
    link: "/wiki/preview/effects",
    title: "状态效果",
    subTitle: "Mod 内所有的状态效果一览，你也可以在游戏内自己试试",
    img: "/icons/big_moe_one.png",
  },
  {
    link: "/wiki/preview/entities",
    title: "生物/实体",
    subTitle: "Mod 内所有的生物/实体一览，目前好像就只有妮头车了",
    img: "/cover/niit_car.png",
  },
  {
    link: "/wiki/preview/biomes",
    title: "生物群系",
    subTitle: "Mod 内所有的生物群系一览，目前只有蓝色沙漠和原野平原...",
    img: "/cover/blue_desert.jpg",
  },
  {
    link: "/download",
    title: "下载MOD",
    subTitle: "你可以在这里下载 Mod，也可以在这里查看 Mod 的更新记录",
    img: logo.src,
  },
  {
    link: "/about/members",
    title: "开发成员",
    subTitle: "你可以在这里查看所有可公开的开发成员",
    img: logo.src,
  },
];
---

<style lang="scss" is:global>
  .changelog {
    padding-left: 14px;

    p {
      margin-bottom: 10px;
    }

    li {
      margin: 8px 0;
      font-size: 12px;
      list-style: circle;

      p {
        margin: 0;
      }

      a {
        color: var(--theme-color);
        text-decoration: underline;
      }
    }
  }
</style>

<div class="flex flex-wrap">
  <div class="w-full md:w-1/4">
    <SingleModule title="关于Wiki" class="changelog">
      <About />
    </SingleModule>
    <SingleModule title="词条更新记录" class="changelog">
      <WikiChangelog />
    </SingleModule>
  </div>
  <div class="w-full md:w-1/2">
    <SingleModule title="导航" class="flex flex-col gap-4">
      {
        guides.map(({ link, img, title, subTitle }) => (
          <a
            class="flex items-center p-3 hover:bg-white/10 transition"
            href={link}
          >
            <img width="32" height="32" src={img} alt={title} />
            <div class="w-full flex flex-col pl-3">
              <h3 class="text-[17px] font-bold">{title}</h3>
              <h4 class="text-[11px] font-light">{subTitle}</h4>
            </div>
          </a>
        ))
      }
    </SingleModule>
  </div>
  <div class="w-full md:w-1/4">
    <SingleModule title="Wiki更新记录" class="changelog">
      <NormalChangelog />
    </SingleModule>
  </div>
</div>
